<template>
  <div>
    <el-dialog
      :title="'选择' + state.type"
      v-model="state.show"
      append-to-body
      width="1000"
      modal-class="person-select-daolog"
    >
      <el-form :model="state.query" :inline="true" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="代码">
              <el-input
                v-model="state.query.code"
                placeholder="请输入"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司英文名称">
              <el-input
                v-model="state.query.enterpriseName"
                placeholder="请输入"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司英文地址">
              <el-input
                v-model="state.query.enterpriseAddress"
                placeholder="请输入"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人英文名称">
              <el-input
                v-model="state.query.contactEnglish"
                placeholder="请输入"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="title">
        选择合适的{{ state.type }}
        <el-button type="primary" @click="getTableData"> 搜索 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getTableData()"
        :autostyle="'height: calc(100% - 81px);'"
        :option="state.tableData.option"
      >
        <el-table-column label="选项" width="50" align="center" fixed="left">
          <template #default="{ row }">
            <div class="sft-radio">
              <el-radio v-model="state.selectedId" :label="row.id"
                >&nbsp;</el-radio
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          width="80"
          label="代码"
          show-overflow-tooltip
        />
        <el-table-column
          prop="enterpriseName"
          width="160"
          label="公司英文名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          width="160"
          label="联系人英文地址"
          show-overflow-tooltip
        />
        <el-table-column
          prop="contactEnglish"
          width="160"
          label="联系人英文名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="telephone"
          width="160"
          label="联系人电话"
          show-overflow-tooltip
        />
        <el-table-column
          prop="fax"
          width="160"
          label="联系人传真"
          show-overflow-tooltip
        />

        <el-table-column
          prop="remark"
          label="备注"
          show-overflow-tooltip
          width="160"
        />
        <!-- <el-table-column label="操作" fixed="right" align="center">
          <template #default="scope">
            <el-button @click="chooseShipper(scope.row)" link type="primary"
              >选取</el-button
            >
          </template>
        </el-table-column> -->
      </AppPageTable>
      <template #footer>
        <div>
          <el-button type="default" @click="state.show = false">取消</el-button>
          <el-button type="primary" @click="modifySubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, nextTick, reactive } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import request from '@/public/request'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'

const Router = useRouter()
const Route = useRoute()
const store = useStore()

const state = reactive({
  show: false,
  selectedId: 0,
  type: '发货人',
  isSecondNotice: false,
  query: {
    code: '',
    enterpriseName: '',
    enterpriseAddress: '',
    contactEnglish: ''
  },
  tableData: {
    data: [],
    option: useTableOption({
      pageSize: 15,
      pageSizes: [10, 15, 50, 100]
    })
  }
})

defineExpose({
  open
})

const emit = defineEmits(['choose'])

// 打开弹框
function open(type, seconde) {
  state.show = true
  state.selectedId = 0
  state.isSecondNotice = seconde ? true : false
  state.type = type
  nextTick(() => {
    getTableData()
  })
}

function modifySubmit() {
  for (const item of state.tableData.data) {
    if (state.selectedId == item.id) {
      emit('choose', item, state.type, state.isSecondNotice)
      state.show = false
      break
    }
  }
}
// function chooseShipper(data) {

// }

function getTableData() {
  state.tableData.option.loading = true
  request
    .get('/api/csshipperconsignee/querypaggelist', {
      ...state.query,
      type: state.type,
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize
    })
    .then((res) => {
      state.tableData.data = res.content
      state.tableData.option.total = res.totalElements
    })
    .finally(() => {
      state.tableData.option.loading = false
    })
}
</script>

<style lang="scss">
.person-select-daolog {
  .el-form--inline .el-form-item {
    margin-right: 0px;
    margin-bottom: 8px;
  }
}
</style>

<style lang="scss" scoped>
.title {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  margin-bottom: 8px;
}
.sft-radio {
  :deep(.el-radio.el-radio--small .el-radio__label) {
    font-size: 0;
    width: 0;
    padding: 0;
  }
}

:deep(.el-table--small .cell) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}
</style>
